'use client'
import React, { useState } from 'react';
import { Space, Switch, Table, Modal, Divider, Button, Form, DatePicker, Input, Select } from 'antd';
import type { TableProps } from 'antd';
import { useRouter } from 'next/navigation';
import Mytype from '../list/page';
import dayjs from 'dayjs';
interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    Collect: boolean,
    title: string,
    idname: string,
    time: string
}

interface SearchParams {
    keyword: string;
    approvalStatus?: string; // 'approved' | 'pending'
    submitTime?: dayjs.Dayjs;
    approvalTime?: dayjs.Dayjs;
    creator: string;
}
export default function Home() {
    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    const [title, setTitle] = useState('')
    const [itemobj, setItemobj] = useState({})
    let router = useRouter()
    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
    const rowSelection: TableProps<DataType>['rowSelection'] = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record: DataType) => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
        }),
    };

    const columns: TableProps<DataType>['columns'] = [
        {
            title: '订单编号',
            dataIndex: 'idname',
            key: 'idname',
        },
        {
            title: '订单标题',
            dataIndex: 'name',
            key: 'name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '关联客户',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '订单总金额',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '审批类型',
            dataIndex: 'Collect',
            key: 'Collect',
            render: (Collect) => {
                return <Switch checked={Collect} />
            }
        },
        {
            title: '创建人员',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '提交时间',
            dataIndex: 'time',
            key: 'time',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button onClick={() => {
                        showModal()
                        setTitle('详情')
                        setItemobj(record)
                    }}>详情</Button>
                </Space>
            ),
        },
    ];
    const data: DataType[] = [
        {
            idname: "SJ20190324010001",
            key: '1',
            name: '订单标题',
            address: '深圳市伊恩科技有限公司',
            age: 1000000,
            Collect: true,
            title: '赵小刚',
            time: "2019-03-15 17:27"
        },
        {
            idname: "SJ20190324010001",
            key: '2',
            name: '订单标题',
            address: '深圳市伊恩科技有限公司',
            age: 1000000,
            Collect: false,
            title: '赵小刚',
            time: "2019-03-15 17:27"
        },
        {
            idname: "SJ20190324010001",
            key: '3',
            name: '订单标题',
            address: '深圳市伊恩科技有限公司',
            age: 1000000,
            Collect: true,
            title: '赵小刚',
            time: "2019-03-15 17:27"
        },
        {
            idname: "SJ20190324010001",
            key: '4',
            name: '订单标题',
            address: '深圳市伊恩科技有限公司',
            age: 1000000,
            Collect: true,
            title: '赵小刚',
            time: "2019-03-15 17:27"
        },
        {
            idname: "SJ20190324010001",
            key: '5',
            name: '订单标题',
            address: '深圳市伊恩科技有限公司',
            age: 1000000,
            Collect: false,
            title: '赵小刚',
            time: "2019-03-15 17:27"
        },
        {
            idname: "SJ20190324010001",
            key: '6',
            name: '订单标题',
            address: '深圳市伊恩科技有限公司',
            age: 1000000,
            Collect: true,
            title: '赵小刚',
            time: "2019-03-15 17:27"
        },
        {
            idname: "SJ20190324010001",
            key: '7',
            name: '订单标题',
            address: '深圳市伊恩科技有限公司',
            age: 1000000,
            Collect: false,
            title: '赵小刚',
            time: "2019-03-15 17:27"
        },
        {
            idname: "SJ20190324010001",
            key: '8',
            name: '订单标题',
            address: '深圳市伊恩科技有限公司',
            age: 1000000,
            Collect: true,
            title: '赵小刚',
            time: "2019-03-15 17:27"
        },
        {
            idname: "SJ20190324010001",
            key: '9',
            name: '订单标题',
            address: '深圳市伊恩科技有限公司',
            age: 1000000,
            Collect: true,
            title: '赵小刚',
            time: "2019-03-15 17:27"
        },
        {
            idname: "SJ20190324010001",
            key: '10',
            name: '订单标题',
            address: '深圳市伊恩科技有限公司',
            age: 1000000,
            Collect: true,
            title: '赵小刚',
            time: "2019-03-15 17:27"
        },
        {
            idname: "SJ20190324010001",
            key: '11',
            name: '订单标题',
            address: '深圳市伊恩科技有限公司',
            age: 1000000,
            Collect: false,
            title: '赵小刚',
            time: "2019-03-15 17:27"
        },
        {
            idname: "SJ20190324010001",
            key: '12',
            name: '订单标题',
            address: '深圳市伊恩科技有限公司',
            age: 1000000,
            Collect: false,
            title: '赵小刚',
            time: "2019-03-15 17:27"
        },
        {
            idname: "SJ20190324010001",
            key: '13',
            name: '订单标题',
            address: '深圳市伊恩科技有限公司',
            age: 1000000,
            Collect: true,
            title: '赵小刚',
            time: "2019-03-15 17:27"
        },
        {
            idname: "SJ20190324010001",
            key: '14',
            name: '订单标题',
            address: '深圳市伊恩科技有限公司',
            age: 1000000,
            Collect: false,
            title: '赵小刚',
            time: "2019-03-15 17:27"
        },
        {
            idname: "SJ20190324010001",
            key: '15',
            name: '订单标题',
            address: '深圳市伊恩科技有限公司',
            age: 1000000,
            Collect: true,
            title: '赵小刚',
            time: "2019-03-15 17:27"
        },
        {
            idname: "SJ20190324010001",
            key: '16',
            name: '订单标题',
            address: '深圳市伊恩科技有限公司',
            age: 1000000,
            Collect: true,
            title: '赵小刚',
            time: "2019-03-15 17:27"
        },
        {
            idname: "SJ20190324010001",
            key: '17',
            name: '订单标题',
            address: '深圳市伊恩科技有限公司',
            age: 1000000,
            Collect: false,
            title: '赵小刚',
            time: "2019-03-15 17:27"
        },
        {
            idname: "SJ20190324010001",
            key: '18',
            name: '订单标题',
            address: '深圳市伊恩科技有限公司',
            age: 1000000,
            Collect: false,
            title: '赵小刚',
            time: "2019-03-15 17:27"
        },
        {
            idname: "SJ20190324010001",
            key: '19',
            name: '订单标题',
            address: '深圳市伊恩科技有限公司',
            age: 1000000,
            Collect: true,
            title: '赵小刚',
            time: "2019-03-15 17:27"
        },
        {
            idname: "SJ20190324010001",
            key: '20',
            name: '订单标题',
            address: '深圳市伊恩科技有限公司',
            age: 1000000,
            Collect: false,
            title: '赵小刚',
            time: "2019-03-15 17:27"
        },
    ];
    const [searchParams, setSearchParams] = useState<SearchParams>({
        keyword: '',
        approvalStatus: undefined,
        submitTime: undefined,
        approvalTime: undefined,
        creator: ''
    });

    const [filteredData, setFilteredData] = useState<DataType[]>(data);
    const handleSearch = () => {
        const results = data.filter(item => {
            // 关键词搜索（订单编号、订单标题、关联客户）
            const keywordMatch =
                !searchParams.keyword ||
                item.idname.toLowerCase().includes(searchParams.keyword.toLowerCase()) ||
                item.name.toLowerCase().includes(searchParams.keyword.toLowerCase()) ||
                item.address.toLowerCase().includes(searchParams.keyword.toLowerCase());

            // 审批状态搜索
            const statusMatch =
                searchParams.approvalStatus === undefined ||
                (searchParams.approvalStatus === 'approved' && item.Collect) ||
                (searchParams.approvalStatus === 'pending' && !item.Collect);

            // 创建人员搜索
            const creatorMatch =
                !searchParams.creator ||
                item.title.toLowerCase().includes(searchParams.creator.toLowerCase());

            // 提交时间搜索
            const submitTimeMatch =
                !searchParams.submitTime ||
                item.time.includes(searchParams.submitTime.format('YYYY-MM-DD'));

            return keywordMatch && statusMatch && creatorMatch && submitTimeMatch;
        });

        setFilteredData(results);
    };

    const handleReset = () => {
        setSearchParams({
            keyword: '',
            approvalStatus: undefined,
            submitTime: undefined,
            approvalTime: undefined,
            creator: ''
        });
        setFilteredData(data);
    };
    return (
        <>
            <div>
                <Form style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', marginTop: '.2667rem' }}>
                    <Form.Item style={{ width: '180px' }}>
                        <Input
                            placeholder='搜索关键词'
                            value={searchParams.keyword}
                            onChange={(e) => setSearchParams({ ...searchParams, keyword: e.target.value })}
                            allowClear
                        />
                    </Form.Item>
                    <Form.Item style={{ width: '180px' }}>
                        <Select
                            placeholder='审批类型'
                            value={searchParams.approvalStatus}
                            onChange={(value) => setSearchParams({ ...searchParams, approvalStatus: value })}
                            options={[
                                { value: 'approved', label: '已审批' },
                                { value: 'pending', label: '未审批' },
                            ]}
                            allowClear
                        />
                    </Form.Item>
                    <Form.Item style={{ width: '180px' }}>
                        <DatePicker
                            placeholder='提交时间'
                            value={searchParams.submitTime}
                            onChange={(date) => setSearchParams({ ...searchParams, submitTime: date })}
                            style={{ width: '100%' }}
                        />
                    </Form.Item>
                    <Form.Item style={{ width: '180px' }}>
                        <DatePicker
                            placeholder='审批时间'
                            value={searchParams.approvalTime}
                            onChange={(date) => setSearchParams({ ...searchParams, approvalTime: date })}
                            style={{ width: '100%' }}
                        />
                    </Form.Item>
                    <Form.Item style={{ width: '180px' }}>
                        <Input
                            placeholder='创建人员'
                            value={searchParams.creator}
                            onChange={(e) => setSearchParams({ ...searchParams, creator: e.target.value })}
                            allowClear
                        />
                    </Form.Item>
                    <Form.Item style={{ width: '180px' }}>
                        <Button type='primary' onClick={handleSearch}>查询</Button>
                        <Button onClick={handleReset} style={{ marginLeft: 8 }}>重置</Button>
                    </Form.Item>
                </Form>
            </div>
            <div>
                <Modal title={title} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                    <Mytype title={title} itemobj={itemobj} handleCancel={handleCancel} key={new Date().getTime()} />
                </Modal>
                <Button>导出</Button>
                <Button>排序</Button>
                <Button>列表</Button>
                <Divider />

                <Table<DataType>
                    rowSelection={{ type: selectionType, ...rowSelection }}
                    columns={columns}
                    dataSource={filteredData}
                    rowKey="key"
                    pagination={{ pageSize: 10 }}
                />
            </div>
        </>
    );
}
